<template>
  <c-select
    v-bind="$attrs"
    v-on="$listeners"
    filterable
    :clearable="clearable"
    :value="value"
    :options="userList"
    @change="hangleChange"
    :props="props"
  ></c-select>
</template>

<script>
export default {
  components: {},
  props: {
    value: {
      type: String,
      default: '',
    },
    clientId: String,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  data() {
    return {
      props: {
        value: 'user_id',
        label: 'real_name',
      },
      params: {
        'agency_type.eq': 6,
        'org_region_lever.lte': 2,
      },
      order: {
        create_time: 'desc',
      },
      tableName: 'credit_agency_info',
      userList: [],
    }
  },
  computed: {
    clearable() {
      return this.$attrs.clearable !== false
    },
  },
  watch: {
    clientId() {
      this.getData()
    },
  },
  created() {
    this.getData()
  },
  mounted() {},
  methods: {
    getData() {
      if (!this.clientId) {
        return
      }
      const params = {
        'service_id.eq': this.clientId,
      }
      this.$api.getData(this.$serviceName, 'credit_service_emp_view', params).then(res => {
        this.userList = (res && res.data) || []
      })
    },
    hangleChange(val) {
      const select = this.userList.find(item => item.user_id === val) || {}
      this.$emit('select', select.real_name, select.phone_number)
    },
  },
}
</script>

<style lang="scss" scoped></style>
